<template>
    <div class="boxWrap" :style="{ background: `linear-gradient(to right, ${colors[index].join(',')})` }">
        <div class="left">
            <div class="head">
                <ZSIcon icon="icon-gongdan" :styles="{ fontSize: '16px' }"></ZSIcon>
                <span class="title">{{ title }}</span>
            </div>
        </div>
        <div class="right">
            <div class="nums">
                <span class="title">
                    <!-- <ZSNumAni :number="Number(num)"></ZSNumAni> -->
                    {{ num }}
                </span>
                <span class="subNum">{{ unit ? unit : subTitle[index] }}</span>
            </div>
            <div class="iconWrap">
                <ZSIcon :icon="icon" :styles="{ fontSize: '44px' }"></ZSIcon>
            </div>
        </div>
    </div>
</template>
<script>
import ZSIcon from '@/components/ZSIcon/ZSIcon.vue';
import ZSNumAni from '@/components/ZSCountTo/ZSNumAni';

export default {
    name: 'Box',
    components: {
        ZSIcon,
        ZSNumAni,
    },
    props: {
        title: {
            type: [String, Number],
        },
        num: {
            type: [String, Number],
        },
        icon: {
            type: [String, Number],
        },
        index: {
            type: [Number, String],
            default: 0
        },
        unit: {
            type: [String, Number],
            default: '',
        }
    },
    data() {
        return {
            colors: [
                ['rgba(125,121,202,1)', 'rgba(133,131,206,1)', 'rgba(171,176,221,1)'],
                ['rgba(125,121,202,1)', 'rgba(133,131,206,1)', 'rgba(171,176,221,1)'],
                ['rgba(64,104,174,1)', 'rgba(65,105,174,1)', 'rgba(143,171,208,1)'],
                ['rgba(64,173,150,1)', 'rgba(71,176,153,1)', 'rgba(148,209,195,1)'],
                ['rgba(205,197,85,1)', 'rgba(206,200,95,1)', 'rgba(218,221,167,1)'],
                ['rgba(104,143,208,1)', 'rgba(104,143,208,1)', 'rgba(159,187,232,1)'],
            ],
            subTitle: ['次', '次', '次', '个', '次', '次']
        }
    },
    methods: {

    },
    computed: {
        numbers() {

        }
    },
}
</script>
<style lang="less" scoped>
.boxWrap {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0px 0px 10px 2px #999999;
    padding: 12px;

    .left {
        color: #ffffff;

        .head {
            display: flex;
            align-items: center;
            justify-content: start;

            .title {
                font-size: 16px;
                margin-left: 6px;
            }
        }
    }

    .right {
        display: flex;
        width: 100%;
        height: calc(100% - 24px);
        align-items: center;
        color: #ffffff;
        justify-content: space-between;

        .nums {
            flex-shrink: 0;
            width: 60%;
            text-align: center;
            font-size: 32px;
            display: flex;
            justify-content: center;
            align-items: center;

            .title {
                font-weight: 800;
            }

            .subNum {
                font-size: 20px;
                margin-left: 24px;
            }
        }

        .iconWrap {
            flex-shrink: 2;
            width: 40%;
            text-align: center;
        }
    }
}
</style>